import React, {useEffect, useMemo, useState} from "react";
import './index.scss'
import Axios from "../../utils/Axios";
import {Button, Descriptions, List, message, Modal, PageHeader, Popover, Tabs} from "antd";
import delAtt from "../../assets/images/delAtt.png";

const {TabPane} = Tabs;

function AttendanceInfo(props) {
  const {item} = props
  const [load, setLoad] = useState(0)
  const [userAttList, setUserAttList] = useState([])
  const inAttUser = useMemo(() => {
    return userAttList.filter(item => item.status === '出勤')
  }, [userAttList])
  const outAttUser = useMemo(() => {
    return userAttList.filter(item => item.status === '旷课')
  }, [userAttList])

  useEffect(() => {
    Axios.get(`/admin/getUserAttendancesByAttendance/${item.id}`)
      .then(res => {
        if (res.data.code === 200) {
          setUserAttList(userAttList => res.data.data)
        }
      })
  }, [item.id, load])
  const modifyAttStatus = async (status, userId) => {
    const res = await Axios.put(`/admin/changeAttendanceStatus/${userId}/${status}`)
    if (res.data.code === 200) {
      message.success(res.data.msg, 1)
      setLoad(load => load + 1)
      props.mustRender(props.mustState + 1)
    } else message.error(res.data.msg)
  }
  const renderList = (data) => {
    return (<List
      bordered
      dataSource={data}
      size="large"
      renderItem={item => (
        <List.Item>
          <div style={{width: 300}}>{item.userName}</div>
          <Popover
            content={<>
              <Button onClick={() => modifyAttStatus('出勤', item.id)} style={{marginRight: 10}}>出勤</Button>
              <Button onClick={() => modifyAttStatus('旷课', item.id)}>旷课</Button>
            </>}
            trigger="click"
          >
            <Button>{item.status}</Button>
          </Popover>
          <div style={{width: 200}}>{item.attendanceTime}</div>
        </List.Item>
      )}
    />)
  }
  const stopAttendance = () => {
    Axios.post(`/admin/stopAttendance/${item.id}`)
      .then(res => {
        message.success(res.data.msg)
        props.mustRender(props.mustState + 1)
        props.setVisible(false)
      })
  }
  const delAttendance = async (id) => {
    const res = await Axios.delete(`/admin/attendance/${id}`)
    if (res.data.code === 200) {
      message.success(res.data.msg, 1)
      props.mustRender(props.mustState + 1)
      props.setVisible(false)
    }
  }
  return (
    <Modal visible={props.visible}
           footer={null}
           style={{height: 500}}
           className="add-new-att"
           width={1200}
           closable={false}
           maskClosable={false}
    >
      <div className="site-page-header-ghost-wrapper">
        <PageHeader
          ghost={false}
          onBack={() => props.setVisible(false)}
          title={item.description}
          subTitle="考勤信息"
          extra={[
            <img src={delAtt} alt="." style={{marginRight: 10}} title="删除考勤" className="del-att"
                 onClick={() => delAttendance(item.id)}/>,
            <Button key="1" danger onClick={stopAttendance}>结束考勤</Button>]}
        >
          <Descriptions size="small" column={3}>
            <Descriptions.Item label="创建时间">{item.createTime}</Descriptions.Item>
            <Descriptions.Item label="开始时间">{item.startTime}</Descriptions.Item>
            <Descriptions.Item label="结束时间">{item.endTime}</Descriptions.Item>
            <Descriptions.Item label="全部成员">{item.totalCount}人</Descriptions.Item>
            <Descriptions.Item label="出勤">{inAttUser.length}人</Descriptions.Item>
            <Descriptions.Item label="缺勤">{outAttUser.length}人</Descriptions.Item>
          </Descriptions>
        </PageHeader>
        <Tabs defaultActiveKey="1" onChange={key => console.log(key)} className="tabs-box">
          <TabPane tab="出勤" key="1">
            {renderList(inAttUser)}
          </TabPane>
          <TabPane tab="缺勤" key="2">
            {renderList(outAttUser)}
          </TabPane>
        </Tabs>
      </div>
    </Modal>
  )
}

export default AttendanceInfo